<template>
  <el-container style="height: 700px; border: 1px solid #eee">
    <el-header style="font-size: 40px; background-color: rgb(238, 241, 246)">
      国密算法工具箱1.0
    </el-header>
    <el-container>
      <!-- 左侧菜单 -->
      <el-aside width="240px" style="background-color: rgb(238, 241, 246); border-right: 1px solid #ddd;">
        <el-menu default-active="1-1">
          <el-submenu index="1">
            <template slot="title">加密解密工具</template>
            <el-menu-item index="1-1">
              <router-link to="/sm2">SM2</router-link>
            </el-menu-item>
            <el-menu-item index="1-1" @click="switchTab('text')">文本加密解密</el-menu-item>
            <el-menu-item index="1-2" @click="switchTab('image')">图片加密解密</el-menu-item>
            <el-menu-item index="1-2">
              <router-link to="/sm3">SM3</router-link>
            </el-menu-item>
            <el-menu-item index="1-3">
              <router-link to="/sm4">SM4</router-link>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>

      <!-- 右侧内容 -->
      <el-main>
        <!-- 文本加密解密 -->
        <div v-if="activeTab === 'text'">
          <h2>文本加密解密</h2>
          <el-input v-model="text" placeholder="请输入明文" style="margin-bottom: 15px;"></el-input>
          <el-row :gutter="10" style="margin-bottom: 15px;">
            <el-col :span="8"><el-button type="primary" @click="handleGenerateKeys">生成密钥</el-button></el-col>
            <el-col :span="8"><el-button type="success" @click="handleSign">签名</el-button></el-col>
            <el-col :span="8"><el-button type="info" @click="handleEncrypt">加密</el-button></el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="8"><el-button type="warning" @click="handleDecrypt">解密</el-button></el-col>
            <el-col :span="8"><el-button type="danger" @click="handleClear">清空</el-button></el-col>
          </el-row>
          <el-collapse>
            <el-collapse-item title="密钥" v-if="publicKey && privateKey">
              <p>公钥: {{ publicKey }}</p>
              <p>私钥: {{ privateKey }}</p>
            </el-collapse-item>
            <el-collapse-item title="签名" v-if="signature">
              <p>{{ signature }}</p>
            </el-collapse-item>
            <el-collapse-item title="加密数据" v-if="encryptedText">
              <p>{{ encryptedText }}</p>
            </el-collapse-item>
            <el-collapse-item title="解密数据" v-if="decryptedText">
              <p>{{ decryptedText }}</p>
            </el-collapse-item>
          </el-collapse>
        </div>

        <!-- 图片加密解密 -->
        <div v-else-if="activeTab === 'image'">
          <h2>图片加密解密</h2>
          <el-upload :on-change="handleImageUpload" accept="image/*" :file-list="imageFileList" list-type="picture-card"
            :on-remove="handleRemove" >
            <i class="el-icon-plus"></i>
          </el-upload>
          <div v-if="imagePreview" style="margin-top: 20px; text-align: left;">
            <h3>上传的图片</h3>
            <img :src="imagePreview" style="max-width: 300px; border: 1px solid #ddd;" />
          </div>
          <div class="button-group">
            <el-button type="primary" icon="el-icon-key" @click="handleGenerateKeys">生成密钥</el-button>
            <el-button type="success" icon="el-icon-lock" @click="handleImageEncrypt">加密图片</el-button>
            <el-button type="warning" icon="el-icon-unlock" @click="handleImageDecrypt">解密图片</el-button>
          </div>
          <el-collapse style="margin-top: 20px;">
            <el-collapse-item title="加密数据" v-if="imageEncryptedData">
              <p style="word-break: break-all;">{{ imageEncryptedData }}</p>
            </el-collapse-item>
            <el-collapse-item title="解密后的图片" v-if="imageDecryptedSrc">
              <img :src="imageDecryptedSrc" style="max-width: 300px; border: 1px solid #ddd;" />
            </el-collapse-item>
          </el-collapse>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import { sm2 } from 'sm-crypto';

export default {
  data() {
    return {
      activeTab: 'text',
      text: '',
      signature: '',
      encryptedText: '',
      decryptedText: '',
      publicKey: '',
      privateKey: '',
      imagePreview: null, // 上传图片的预览地址
      imageFileList: [], // 文件列表，手动管理状态
      imageFile: null, // 原始图片文件
      imageEncryptedData: '', // 加密后的图片数据
      imageDecryptedSrc: '', // 解密后的图片预览地址
    };
  },
  methods: {
    switchTab(tab) {
      this.activeTab = tab;
      this.handleClear();
    },
    handleGenerateKeys() {
      const keypair = sm2.generateKeyPairHex();
      this.publicKey = keypair.publicKey;
      this.privateKey = keypair.privateKey;
      this.$message.success('密钥对已生成');
    },
    handleSign() {
      if (!this.text || !this.privateKey) {
        this.$message.warning('请先生成密钥并输入明文');
        return;
      }
      this.signature = sm2.doSignature(this.text, this.privateKey);
      this.$message.success('签名成功');
    },
    handleEncrypt() {
      if (!this.text || !this.publicKey) {
        this.$message.warning('请先生成密钥并输入明文');
        return;
      }
      this.encryptedText = sm2.doEncrypt(this.text, this.publicKey);
      this.$message.success('加密成功');
    },
    handleDecrypt() {
      if (!this.encryptedText || !this.privateKey) {
        this.$message.warning('请先加密数据');
        return;
      }
      this.decryptedText = sm2.doDecrypt(this.encryptedText, this.privateKey);
      this.$message.success('解密成功');
    },
    handleImageUpload(file) {
      // 检查是否存在原始文件
      const imageFile = file.raw instanceof Blob ? file.raw : file.originFileObj;

      if (!imageFile) {
        this.$message.error('无法解析上传的文件，请重试');
        return;
      }

      // 读取文件为 Base64 数据
      const reader = new FileReader();
      reader.onload = (e) => {
        this.imageFile = e.target.result; // 保存 Base64 数据
        this.imagePreview = e.target.result; // 用于显示预览
        this.$message.success('图片上传成功');
      };
      reader.readAsDataURL(imageFile); // 将图片文件读取为 Base64 格式
    }
    ,
    handleRemove(file) {
      this.imageFileList = this.imageFileList.filter((item) => item !== file.raw);
      this.imageFile = null;
      this.imagePreview = null;
      this.imageEncryptedData = '';
      this.imageDecryptedSrc = '';
    },
    handleImageEncrypt() {
      if (!this.imageFile) {
        this.$message.warning('请先上传图片');
        return;
      }
      try {
        this.imageEncryptedData = sm2.doEncrypt(this.imageFile, this.publicKey);
        this.$message.success('图片加密成功');
      } catch (error) {
        this.$message.error('图片加密失败');
      }
    },
    handleImageDecrypt() {
      if (!this.imageEncryptedData) {
        this.$message.warning('请先加密图片');
        return;
      }
      try {
        const decryptedData = sm2.doDecrypt(this.imageEncryptedData, this.privateKey);
        this.imageDecryptedSrc = decryptedData;
        this.$message.success('图片解密成功');
      } catch (error) {
        this.$message.error('图片解密失败');
      }
    },
    handleClear() {
      this.text = '';
      this.signature = '';
      this.encryptedText = '';
      this.decryptedText = '';
      this.imageFile = null;
      this.imageFileList = [];
      this.imageEncryptedData = '';
      this.imageDecryptedSrc = '';
    },
  },
};
</script>

<style scoped>
h2 {
  margin-bottom: 20px;
}

p {
  word-wrap: break-word;
  word-break: break-all;
}
</style>
